<script setup lang="ts">

const showProfile = ref(true);
const intro = ref('花有重开日，人无再少年，珍重！');
const profile = ref([
  { icon: 'icon-youxiang', title: '电子邮箱', text: '1215627787@qq.com' },
  { icon: 'icon-dizhi', title: '目前在', text: '成都' },
  { icon: 'icon-xingbie', title: '性别', text: '直男' },
  { icon: 'icon-nianling', title: '年龄', text: '2X' },
]);
const links = ref([
  { icon: 'icon-github', url: 'https://github.com/Aizener' },
  // { icon: 'icon-logo-qq', url: 'https://qq.com' },
]);

</script>

<template>
  <aside v-if="showProfile" class="w-1/4  bg-neutral-900 flex flex-col p-4 rounded-lg border-1 border-neutral-800 max-lg:w-full">
    <div class="flex flex-col gap-5 items-center max-lg:flex-row">
      <div class="bg-neutral-800 p-2 rounded-md">
        <!-- <NuxtImg src="/avatar.jpg" alt="image"></NuxtImg> -->
        <img src="~/assets/imgs/avatar.jpg" class="w-32 h-32 max-lg:min-w-24 max-lg:h-24" >  
      </div>
      <div class="flex flex-col items-center">
        <h1 class="text-white text-2xl font-bold">I&apos;am Cola.</h1>
        <div class="bg-neutral-800 p-2 rounded-lg mt-4">
          <h2 class="text-white text-sm px-2">{{ intro }}</h2>
        </div>
      </div>
    </div>
    <div class="w-full h-0.5 bg-neutral-700 my-8"/>
    <div class="w-full flex flex-col gap-6 max-lg:flex-row max-lg:flex-wrap">
      <div
        v-for="(item, idx) in profile"
        :key="idx"
        class="flex items-center gap-4"
      >
        <div class="w-10 h-10 flex justify-center items-center bg-neutral-800 rounded-md overflow-hidden shadow-md shadow-neutral-950">
          <i class="iconfont text-amber-300 text-xl" :class="[item.icon]"/>
        </div>
        <div class="flex flex-col gap-1">
          <p class="text-neutral-400 text-xs uppercase">{{ item.title }}</p>
          <p class="text-white text-xs">{{ item.text }}</p>
        </div>
      </div>
    </div>
    <div class="w-full h-0.5 bg-neutral-700 my-8"/>
    <div class="flex justify-center gap-4">
      <NuxtLink
        v-for="(item, idx) in links"
        :key="idx"
        :to="item.url"
        target="_blank"
        class="flex flex-col justify-center items-center w-16 h-16 rounded-md bg-neutral-700 border border-neutral-800 hover:bg-green-600"
      >
        <i class="iconfont text-3xl" :class="[item.icon ? item.icon : '']" />
        <span class="text-neutral-900 text-xs">Github</span>
      </NuxtLink>
    </div>
    <NuxtLink class="text-neutral-300 text-xs text-center mt-4 hover:text-green-600" to="https://beian.miit.gov.cn/" target="_blank">备案号：蜀ICP备2025133833号</NuxtLink>
  </aside>
</template>

<style lang="scss" scoped>
</style>